Псевдоклассы и псевдоэлементы
<!DOCTYPE html>
<html>
    <title>Псевдо: классы и элементы</title>
      /* Псевдоклассы для ссылок */
        Псевдокласс для наведения курсора
        с группировкой селекторов
      a:hover, h1:hover { background: yellow }
        Псевдоклассы для первого и последнего
        "ребёнка" своего "родителя" 
      p:first-child { color: green }
      p:last-child { color: blue }
      /* Псевдоэлементы */
      p:first-letter { color: red }
      p:first-line { background: silver }
    <h1>На меня навели курсор</h1>
      <a href="file-1.html">По мне ещё не кликали</a>
      <a href="file-2.html">По мне уже кликали</a>
      <a href="file-3.html">На меня навели курсор</a>
      <p>Первый абзац в разделе 
        состоящий из нескольких строк</p>
      <p>Второй абзац в разделе 
        состоящий из нескольких строк</p>
      <p>Третий абзац в разделе 
        состоящий из нескольких строк</p>
      <p>Последний абзац в разделе 
        состоящий из нескольких строк</p>
</html>